<template>
	<view class="b-main">
		<u-empty margin-top="500" text="暂时没有数据>_<" mode="search" :show="dataList.length == 0"></u-empty>
		<view class="b-one" v-for="(item,index) in dataList" :key="index"
			@tap="$navto.navto(`/pages/info/info?source=${dataSource}&id=${item.id}`)">
			<u-image :src="item.img" mode="scaleToFill" width="160rpx" class="b-icon img-box" :lazyLoad="true"
				:errorIcon="_imgs.no_book" :showError="false">
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="b-info">
				<view class="b-info-title">
					<view class="b-info-name" v-if="!disable.name">{{item.name}}</view>
					<view class="b-info-hot" v-if="!disable.hot">
						<view class="swgIcon icon-huomiao"></view>
						<view>{{item.hot}}</view>
					</view>
				</view>
				<view class="b-info-author" v-if="!disable.author">{{item.author}}</view>
				<view class="b-info-type" v-if="!disable.type">{{item.type}}</view>
				<view class="b-info-news" v-if="!disable.news">{{item.news}}</view>
				<view class="b-info-time" v-if="!disable.endTime">{{item.overTime}}</view>
				<view class="b-info-intro" v-if="!disable.intro">{{item.introduce}}</view>
			</view>
		</view>
		<u-loadmore class="loadmore" v-if="enablePage&&dataList.length>0" :status="status" />
	</view>
</template>

<script>
	export default {
		name: "book-list",
		data() {
			return {
				status: 'loadmore',
				pageNum: 1,
				dataList: [],
			}
		},
		props: {
			pageSize: {
				type: Number,
				default: 20
			}, // 分页单页大小
			enablePage: {
				type: Boolean,
				default: false
			}, // 开启分页
			nextPage: {
				type: Number,
				default: 1
			}, // 是否需要加载下一页的标识
			disable: {
				type: Object,
				default: () => ({})
			}, // 禁用的字段列表
			dataSource: {
				type: String,
				default: () => ({})
			}, // 数据站点域名
			dataUrl: {
				type: String,
				default: () => ({})
			}, // 数据详细页路径
		},
		watch: {
			nextPage: 'next'
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/info/info?source=' + this.dataSource + '&id=' + id
				})
			},
			search() {
				let url = this.dataSource + this.dataUrl + (this.enablePage ? '/' + this.pageNum + (this.dataUrl == 'wanjiexiaoshuo' ? '' : '.html') : '');
				console.info("初始化书籍列表 分页:" + this.enablePage + " 源:" + url);
				let that = this;
				this.zaiApi({
					url: url
				}).then(function(html) {
					if(url.indexOf('paihangbang') !=-1){
						that._tool.searchRankingList(html).then(function(list) {that.deal(list)});
					}else if(url.indexOf('searchkey') !=-1){
						that._tool.search(html).then(function(list) {that.deal(list)});
					}else if(url.indexOf('wanjiexiaoshuo') !=-1){
						that._tool.searchEndBooks(html).then(function(list) {that.deal(list)});
					}
				});
			},
			deal(list) {
				if (list.length == 0) { //当前查询条件没有数据 则没有更多数据
					this.status = 'nomore';
				} else { //反而则可能还有更多数据
					//总数据=之前的全部数据加上当前查询到的数据
					this.dataList = this.dataList.concat(list);
					this.status = 'loadmore';
				}
			},
			next() {
				if (!this.enablePage) {
					return;
				}
				if (this.status == 'nomore') {
					return;
				}
				console.info("加载下一页")
				this.status = 'loading';
				this.pageNum = this.pageNum + 1;
				this.search();
			},
		},
		mounted() {

		},
		created() {
			this.search();
		}
	}
</script>

<style scoped>
	/* 书籍列表 */
	.loadmore {
		padding-bottom: 20rpx;
	}

	.b-main {
		padding-bottom: 32rpx;
	}

	.b-one {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
		padding-bottom: 20rpx;
	}

	.b-icon {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.b-info {
		width: 160rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.b-info-title {
		display: flex;
		justify-content: space-between;
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.b-info-name {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.b-info-hot {
		font: var(--f-size-1) normal;
		color: var(--c-txt-4);
		display: flex;
		justify-content: space-between;
	}
	
	.b-info-time,
	.b-info-type,
	.b-info-news,
	.b-info-intro {
		color: var(--c-txt-2);
		font: var(--f-size-1)/var(--f-size-2) normal;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.b-info-author {
		color: var(--c-txt-3);
		font: var(--f-size-1)/var(--f-size-2) normal;
		display: flex;
		align-items: center;
	}

	/* 书籍列表 */
</style>
